<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>微派-H5支付-示例</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.7.0/js/md5.min.js"></script>
</head>
<body>
<div class="all_page">
	<div style="margin:10px;font-size:24px;">
	<p>微派-H5支付-示例<p/><br><br>
	<p> 在线充值0.01元<p/><button id="buyButton" style="font-size:18px;">充值</button>
	</div>
</div>
</body>
</html>

<!-- #################微派支付--H5支付--集成示例2.0#################开始######################-->
<!--1.添加控制台活的的script标签，实际项目中请替换真实appId-->
<script id='wpay-jspay-script' src='http://jspay.wiipay.cn/1/jspay/wpayscripts.do?appId=3db1cffa7cdd7c68b80d8775dc61b5e2'></script>
<script>
    document.getElementById("buyButton").onclick = function() {
        /**
         * 2. 需要支付时调用WP.click接口传入参数
         */
		 
       var app_id = "3db1cffa7cdd7c68b80d8775dc61b5e2";//微派分配的appId,联系运营人员获取，实际项目中请替换真实appId
       var body = "在线充值"; //商品名称，必填项，请勿包含敏感词
       var callback_url = "http://jspay.wiipay.cn/1/jspay/result.do";//支付成功后跳转的商户页面(用户看到的页面)
       var channel_id = "default";//渠道编号
       var out_trade_no = (new Date().getTime())+""; //商户单号，确保不重复，如想透传更多参数信息，建议以Json-->String->Base64编码后传输，必填项
       var total_fee = "0.01";//商品价格(单位:元)，必填项
       var version = "2.0"; //版本号，默认填写2.0即可，必填项
       
       var key = "CRCBwJce5ku88n8LSEbRWTg5dWAkJBiq";//签名所需key,联系运营人员获取
       
       //本签名示例，仅为了演示，实际项目中为了安全考虑，请勿将key对外。字符串拼接规则为，参与签名的参数，按字母序key=value方式然后加上key进行md5,最后sign转大写
       var sign_prep = "app_id="+app_id+"&body="+body+"&callback_url="+callback_url+"&channel_id="
       +channel_id+"&out_trade_no="+out_trade_no+"&total_fee="+total_fee+"&version="+version+key;
       
       var sign = md5(sign_prep).toUpperCase();//签名串,签名规则:MD5，utf-8
         
		WP.click({
			//"instant_channel":"ali",//配置默认支付方式，当仅有一个支付方式时，不会弹出收银台，会直接跳转到支付界面；支付宝ali，微信公众号wx，银联un，网银wy，此参数不参与签名
			"debug":1, //开启调试模式，会显示错误信息，注意，上线后需要去掉，此参数不参与签名
			"body":body, 
            "callback_url" : callback_url, 
            "channel_id":channel_id, 
            "out_trade_no":out_trade_no,
            "total_fee":total_fee,  
            "sign":sign,
            "version":version
        });
        
		
        /**
         * click调用错误返回：默认行为console.log(err)
         */
        WP.err = function(err) {
            //err 为object, 例 ｛"ERROR" : "xxxx"｝;
            console.log(err);
        }
    };

</script>
<!-- #################微派支付--H5支付--集成示例2.0#################结束######################-->